<template>
  <div >
    <div>
      <div class="font15 mt10 pl10">
        <span class="titletext ">{{titledata.title}}</span>
        <div class="graytext  mt10 font13">
          <span >工单编号：</span>
          <span class="titletext">{{titledata.pmInsId}}</span>
        </div>
      </div>
      <!-- 基本信息 -->
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">基础信息</span>
      </div>
      <van-field @click="tomsg()" readonly required name="businessId" :value="businessdata.businessId" label-width="5em" label="商机编号：" />
      <van-field readonly required name="businessName" :value="businessdata.businessName" label-width="5em" label="商机名称：" />
      <van-field readonly required name="projectEstablishNumber" :value="businessdata.projectEstablishNumber" label-width="5em" label="项目编号：" />
      <van-field readonly required name="projectEstablishName" :value="businessdata.projectEstablishName" label-width="5em" label="项目名称：" />
      <van-field readonly required name="competeType" :value="businessdata.competeType" label-width="5em" label="竞争方式：" />
      <van-field readonly required name="projectModel" :value="businessdata.projectModel" label-width="7em" label="项目实施类型：" />
      <van-field readonly name="projectServiceContent" :value="businessdata.projectServiceContent" label-width="7em" label="项目实施类型：" />
      <van-field readonly name="projectType" :value="businessdata.projectType" label-width="5em" label="项目类型：" />
      <van-field readonly required name="contractRelationship" :value="businessdata.contractRelationship"   label-width="7em" label="合同对应关系：" autosize type="textarea" rows="1"/>
      <van-field readonly required name="autonomousImplemention" :value="zizhudata.autonomousImplemention" label="是否自主实施:" label-width="7em" />
      <!-- 是否自主实施 “是” 有这一行 -->
      <van-field readonly required name="autonomousImplementionType" :value="zizhudata.autonomousImplementionType" label="项目自主实施类型:" label-width="9em" />
      <van-field v-if="zizhudata.autonomousImplemention == '是'" readonly required name="autImplementScope" :value="zizhudata.autImplementScope" label="自主实施范围:" label-width="7em" />
      <van-field readonly required name="projectAutoLevel" :value="businessdata.projectAutoLevel" label="项目自主等级：" label-width="7em"/>
      <van-field readonly required name="entrustedSalesModel" :value="zizhudata.entrustedSalesModel" label="是否受托代销项目:" label-width="8.5em" />
      <van-field readonly required name="partnerName" :value="zizhudata.partnerName" label="合作伙伴名称：" label-width="7em"/>
      <van-field readonly  name="vendorCode" :value="zizhudata.vendorCode" label="供应商编码：" label-width="7em"/>
      <van-field readonly required name="contractPlanType" :value="businessdata.contractPlanType" label="合同计划类型：" label-width="7em"/>
      <div v-if="zizhudata.contractType=='有收有支'">
        <van-field readonly required name="supplierCode" :value="zizhudata.supplierCode" label="计费单位（供应商）编码:" label-width="11.5em" />
        <van-field readonly required name="supplierName" :value="zizhudata.supplierName" label="计费单位（供应商）名称:" label-width="11.5em" />
      </div>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">合同草稿信息</span>
      </div>
      <van-field readonly required name="contractSerialNumber" :value="businessdata.contractDrawUp.contractSerialNumber" label-width="6em" label="合同流水号：" />
      <van-field readonly  name="incExpTypeValue" :value="incExpTypeValue" label="收支类型：" label-width="5em" />
      <van-field readonly required name="contractName" :value="businessdata.contractDrawUp.contractName" label-width="7em" label="合同草稿名称：" autosize type="textarea" rows="1"/>
      <van-field readonly required name="isProtocal" :value="businessdata.isProtocal=='Y'?'是':'否'" label-width="7em" label="是否补充协议：" />
      <historyAndSuggs id='target' :showHistory='showHistory'
                       :historydata='historydata' :approveList='approveList' />
    </div>


  </div>
</template>
 
<script>
import { openFileUrl } from '@/store/openFile'
import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue"
import {queryByType} from "@/api/dictapi";
import {Notify} from "vant";
export default {
  data() {
    return {
      showUpAndDownPop:false, 
      UpAndDownPopColumns:['是', '否'],
      showCalculateModePop:false, 
      CalculateModePopColumns:['主理人', '代理人'],
      showIsAttentionPop:false, 
      IsAttentionPopColumns:['是', '否'],
      incExpTypeValue:'',
    }
  },
  props: ['titledata','businessdata','fromdata','showHistory','historydata','approveList','zizhudata'],
  watch: {
    businessdata: {
      handler () { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        this.getTypeValue();
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    }
  },
  methods: {
     tomsg () {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    openFileUrlfun(value) {
      this.$router.push(
        {
          name: 'fileview',
          query: {
            openFileUrl: openFileUrl(value)
          }
        }
      );
    },
    UpAndDownPopConfirm(value) {
      this.showUpAndDownPop = false
      this.fromdata.upAndDown = value
    },
    CalculateModePopConfirm(value) {
      this.showCalculateModePop = false
      this.fromdata.calculateMode = value
    },
    IsAttentionPopConfirm(value) {
      this.showIsAttentionPop = false
      this.fromdata.isAttention = value
    },
    getTypeValue(){
      //收支类型
      if (this.businessdata.contractDrawUp?.incExpType){
        queryByType({ dictType:'incExpType'} )
            .then((result) => {
              if (!result.data) {
                Notify(result.message);
                return;
              }
              for(var i=0;i<result.data.data.length;i++){
                if(result.data.data[i].value==this.businessdata.contractDrawUp?.incExpType){
                  this.incExpTypeValue = result.data.data[i].name;
                }
              }
            })
      }
    }
  },
  computed: {
    isCWSPLocation: function () {
      return this.location=='dict.accountingApproval'
    },
  },
  components: {
    historyAndSuggs
  },
}
</script>
 
<style>
.tables.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>